<template>
  <div class="RootBox">
    <div class="wanjun">
      <div class="mbnav">
        <div class="mbnavsontwo">
          <!-- 左侧图标 -->
          <el-row class="iconlist">
            <span class="mobile">
              <el-button class="addUser" size="mini" icon="iconfont icon-plus-creat" @click="RouterAddUser"
                >新建角色</el-button
              >
            </span>

            <span class="mobile">
              <el-button @click="getUserList" class="Refresh" size="mini" icon="iconfont icon-ico_reset"
                >刷新</el-button
              >
            </span>
            <!-- 右侧输入框 -->
            <span class="inputserach">
              <el-input placeholder="请输入查询内容" v-model="input3" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="seachUser"></el-button>
              </el-input>
            </span>
          </el-row>
        </div>
        <el-dialog
          width="800px"
          :title="falg ? '新建权限集' : '编辑权限集'"
          :close-on-click-modal="false"
          @close="clearTable()"
          :visible.sync="AddOrganization"
          @open="dialogOpenHandler"
        >
          <div>
            <div style="display: flex">
              <div class="basisinfo">基础信息</div>
              <div class="limitinfo">权限集信息</div>
            </div>
            <el-form v-if="formUser" ref="formUser" :rules="rolesRules" :model="formUser">
              <div class="left">
                <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                  <el-input :disabled="isDisable" v-model.trim="formUser.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编码" prop="code" :label-width="formLabelWidth">
                  <el-input :disabled="isDisable" v-model.trim="formUser.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="comments" :label-width="formLabelWidth">
                  <el-input :disabled="isDisable" v-model.trim="formUser.comments" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
                  <el-input :disabled="isDisable" v-model.number="formUser.sort" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="菜单列表" class="aaaa" label-width="100px">
                  <el-tree
                    ref="TreeNodes"
                    :data="datalist"
                    :show-checkbox="!isDisable"
                    node-key="id"
                    default-expand-all
                    :props="defaultProps"
                    :default-checked-keys="menuIds"
                  ></el-tree>
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="isDisable">
              <el-button @click="clearTable()">关 闭</el-button>
            </div>
            <div slot="footer" class="dialog-footer" v-else>
              <el-button @click="clearTable()">取 消</el-button>
              <el-button type="primary" @click="falg ? addsubmitUser('formUser') : updateRoles('formUser')"
                >确 定</el-button
              >
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 表格模块 -->
    <div class="table">
      <div class="table2">
        <el-table
          :fit="true"
          height="550"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border=""
          size="mini"
          :header-cell-style="{ background: '#eff3f8', color: '#606266' }"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="角色名称"></el-table-column>
          <el-table-column prop="code" label="角色编码"></el-table-column>
          <el-table-column prop="comments" label="备注"></el-table-column>
          <el-table-column prop="sort" sortable label="序号"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" class="updateUser" @click="updateRolesHandler(scope.row, false)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteUserList(scope.row)">删除</el-button>
            </template>

            <el-button size="mini" class="updateUser" @click="updateRolesHandler(scope.row, true)">查看菜单</el-button>
          </el-table-column>
        </el-table>
      </div>
      <Pagecomponent
        :total="total"
        ref="pagecom"
        :pagesizelist="[15, 20]"
        @getAdminRative="getAdminRative"
        :Pagesize="pageSize"
        :currentPage="currentPage"
      />
    </div>
  </div>
</template>
<script>
import { rolesRules } from '@/utils/tools/RegExpression.js'
import Pagecomponent from '@/components/custom/PageCom.vue'
import { flatPidToTree } from '@/utils/tools/common'
import authorityApi from '@/utils/tools/authorityApi/index.js'
export default {
  name: 'roles',
  components: {
    Pagecomponent
  },
  props: {},
  data() {
    return {
      input: '', // 输入框绑定值
      isDisable: false, //权限集弹框是否只读
      tableData: [], // 表格数组
      dialogFormVisible: false, // 弹出层1默认是否显示
      currentPage: 1,
      pageSize: 15,
      total: 0,
      deleteIdList: '', //当前删除数组Id
      AddOrganization: false, //弹出框显示和隐藏
      updateList: [],
      falg: false,
      form: {
        // 表单验证数据
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      input3: '',
      formUser: {},
      datalist: [],
      formLabelWidth: '120px',
      defaultProps: {
        label: 'name'
      },
      menuIds: [],
      rolesRules: rolesRules
    }
  },
  created() {
    this.getUserList()
  },
  mounted() {},
  methods: {
    // 新建权限集路由跳转
    RouterAddUser() {
      this.falg = true
      authorityApi.MenuPort.getMenuTree({ loading: true }, (res) => {
        let data = res
        this.datalist = flatPidToTree(data)
        if (!this.falg) {
          authorityApi.MenuPort.rolesByidgetMenuTree({ id: this.updateList[0], loading: true }, (res) => {
            this.menuIds = res.map((item) => item.id)
            this.AddOrganization = true
          })
        } else {
          this.AddOrganization = true
        }
      })
      // this.opendialog();
      // this.$router.push("/AppList/Roles_components_AddRoles");
    },
    //获取权限集列表数据
    getUserList(list) {
      if (list && list.length > 0) {
        this.pageSize = list[0]
        this.currentPage = list[1]
      }
      authorityApi.RolesPort.getRolelist(
        {
          currentPage: this.currentPage ? this.currentPage : 1,
          pageSize: this.pageSize ? this.pageSize : 5,
          name: this.input3 ? this.input3 : '',
          loading: true
        },
        (res) => {
          this.total = res.total
          this.tableData = res.records
        }
      )
    },
    getAdminRative(list) {
      this.getUserList(list)
    },
    handleSelectionChange(row) {
      this.deleteIdList = row.map(({ id }) => {
        return id
      })
      this.updateList = this.deleteIdList
      this.deleteIdList = this.deleteIdList.join(',')
    },
    //删除权限集事件
    deleteUserList(row) {
      if (this.deleteIdList.length === 0 && !row.id) {
        this.$message({
          type: 'error',
          message: '请先选择需要删除的权限集'
        })
      } else {
        if (row.id) {
          this.deleteIdList = row.id
        }
        this.$confirm('此操作将永久删除当前权限集, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: this.deleteIdList,
            loading: true
          }
          authorityApi.RolesPort.DleteRoles(data, (res) => {
            this.getUserList()
          })
        })
      }
    },
    //编辑权限集事件
    updateRolesHandler(row, falg) {
      if (row && row.id) {
        this.falg = false
        this.isDisable = falg
        this.updateList[0] = row.id
        this.opendialog()
      } else {
        if (this.updateList.length === 0 && !row.id) {
          this.$message({
            type: 'error',
            message: '请先选择需要编辑的权限集'
          })
        } else if (this.updateList.length === 1) {
          this.falg = false
          this.isDisable = falg
          this.opendialog()
        } else {
          this.$message({
            type: 'error',
            message: '一次只能编辑一个权限集'
          })
        }
      }
    },
    //搜索权限集
    seachUser() {
      this.getUserList()
    },
    //提交编辑事件
    updateRoles(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //获取已选菜单数据ID
          let menuIds = this.$refs.TreeNodes.getCheckedNodes(false, false)
          menuIds = menuIds.map(({ id }) => {
            return id
          })
          let data = {
            ...this.formUser,
            sysMenuIds: menuIds,
            loading: true
          }
          authorityApi.RolesPort.updateRoles(data, (res) => {
            this.formUser = {}
            this.AddOrganization = false
            this.getUserList()
          })
        }
      })
    },
    //提交新增事件
    //新建权限集
    addsubmitUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let Ids = this.$refs.TreeNodes.getCheckedNodes()
          Ids = Ids.map(({ id }) => {
            return id
          })
          let menuIds = Ids
          let data = {
            ...this.formUser,
            sysMenuIds: menuIds,
            loading: true
          }

          authorityApi.RolesPort.AddRoles({ ...data }, (res) => {
            this.$refs.TreeNodes.setCheckedKeys([])
            this.AddOrganization = false
            this.getUserList()
          })
        }
      })
    },
    clearTable() {
      this.AddOrganization = false
      this.$refs.multipleTable.clearSelection()
      this.$refs.formUser.clearValidate()
      this.formUser = {}
      this.menuIds = []
      this.datalist = []
    },
    opendialog() {
      if (this.falg) {
        this.AddOrganization = true
      } else {
        //通过Id获取权限集详情
        //权限集查看当前菜单的时候看
        authorityApi.RolesPort.getRolesByid({ id: this.updateList[0] }, (res) => {
          this.formUser = res
          this.AddOrganization = true
        })
      }
      //获取菜单数据
      if (this.isDisable) {
        //当前是用户查看权限集
        authorityApi.MenuPort.rolesByidgetMenuTree({ id: this.updateList[0] }, (res) => {
          let datalist = res
          this.datalist = flatPidToTree(datalist)
          this.AddOrganization = true
        })
      } else {
        //当前是超级管理员查看权限集
        authorityApi.MenuPort.getMenuTree({}, (res) => {
          this.datalist = flatPidToTree(res)
          if (!this.falg) {
            authorityApi.MenuPort.rolesByidgetMenuTree({ id: this.updateList[0], loading: true }, (res) => {
              this.menuIds = res.map((item) => item.id)
              this.AddOrganization = true
            })
          } else {
            this.AddOrganization = true
          }
        })
      }
    },
    dialogOpenHandler() {
      if (this.$refs.TreeNodes) {
        this.$refs.TreeNodes.setCheckedKeys(this.menuIds)
      }
    }
  },
  watch: {
    input3(newvalue, oldvalue) {
      if (!newvalue) {
        this.getUserList()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.btnicon {
  font-size: 12px !important;
}
.addUser {
  background-color: #4285f4 !important;
  color: #fff !important;
}
.updateUser {
  background-color: #1c84c6 !important;
  color: #fff !important;
}
.lookUser {
  background-color: #1ab394 !important;
  color: #fff !important;
}
.Refresh {
  background-color: #f7a54a !important;
  color: #fff !important;
}
.el-button--mini {
  font-size: 12px !important;
  padding: 8px 4px !important;
  width: 72px !important;
  height: 30px !important;
  line-height: 2px !important;
}
.RootBox {
  background-color: #fff;
  height: 100%;
}
.iconlist {
  position: relative;
  align-items: center;
}
/deep/ .el-table__body-wrapper .is-scrolling-right {
  width: 100%;
}
.table {
  background-color: #fff;
  .table2 {
    margin: 0 20px;
  }
}
/deep/.el-table th > .cell {
  text-align: center;
}
.span2 {
  display: flex;
  width: 1200px;
  justify-content: space-between;
}
.span3 {
  margin-left: 880px;
}
.span1 {
  width: 333px;
  margin-right: 10px;
}
.mbnav {
  height: 115px;
  background-color: #fff;
  .mbnavson {
    height: 51px;
    margin-left: 24px;
    line-height: 51px;
    border-bottom: 1px solid #4285f4;
  }
  .mbnavsontwo {
    height: 64px;
    margin-left: 24px;
    line-height: 64px;
  }
  .mobile {
    line-height: 21px;
    margin-right: 25px;
  }
  .el-button--mini {
    font-size: 16px;
  }
}
/deep/ .el-breadcrumb__separator[class*='icon'] {
  color: #4285f4;
}
/deep/ .el-dialog {
  width: 50%;
}
/deep/.el-breadcrumb__inner {
  color: #4285f4 !important;
  font-size: 14px;
}
/deep/.el-breadcrumb__inner.is-link {
  color: #4285f4 !important;
  font-size: 14px !important ;
}
.dialog-footer {
  text-align: center;
}
/deep/.el-form {
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  text-align: center;
}
/deep/ .el-dialog__title {
  color: #4285f4;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid #4285f4;
}
/deep/ .cell {
  text-align: center;
}
/deep/.el-pagination {
  margin-top: 20px;
  text-align: center;
}
/deep/.aaaa {
  width: 100% !important;
  height: 500px !important;
}
.inputserach {
  position: absolute;
  right: 2%;
}
.el-table thead {
  background-color: #f6f6f6 !important;
}
.el-tree {
  padding-top: 26px;
  height: 420px;
  overflow-y: scroll;
}
.right {
  width: 50%;
}
.basisinfo {
  width: 40%;
  font-size: 17px;
  color: #4285f4;
}
.limitinfo {
  width: 40%;
  padding-left: 54px;
  font-size: 17px;
  color: #4285f4;
}
</style>
